<template>
  <view class="content">
    <view class="header-view">
      <view class="header-name line-1">您好，{{ userName }}</view>
      <view class="set-view">
        <uni-badge
          size="small"
          :is-dot="true"
          :text="bot"
          absolute="rightTop"
          type="error">
          <view
            @click="openNotice"
            class="topBtn click-view">
            <uni-icons
              type="chatbubble"
              size="30"></uni-icons>
          </view>
        </uni-badge>
        <view
          @click="openSet"
          class="topBtn click-view"
          style="margin-left: 25rpx">
          <uni-icons
            type="gear"
            size="30"></uni-icons>
        </view>
      </view>
    </view>

    <view
      class="menu-view"
      v-for="(item, index) in menuList"
      :key="index">
      <view
        class="menu-line-view"
        v-if="item.showTitle">
        <view class="menu-title">{{ item.name }}</view>

        <view class="menu-block-list">
          <view
            class="menu-children click-view"
            v-for="(items, index) of item.list"
            :key="index"
            :style="[{ color: items.color }]"
            @click="toPage(items.url)"
            v-if="items.showMenu">
            <view>
              <text
                class="iconfont"
                :class="items.icon"></text>
            </view>
            <view class="title-name">{{ items.name }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
var that;
export default {
  data() {
    return {
      bot: 0,
      setViewShow: false,
      modShow: false,
      userName: '',
      farEndList: [],
      colorList: [
        '#712328',
        '#b55400',
        '#006fa7',
        '#7b3db9',
        '#007000',
        '#a60000',
        '#2a7381',
        '#555555',
        '#378b4d',
      ],
      menuList: [
        {
          name: 'WMS',
          showTitle: false,
          list: [
            {
              name: '并托',
              url: '../workInside/palletFit',
              icon: 'icon-hebing',
            },
            {
              name: '拆托',
              url: '../workInside/palletSplit',
              icon: 'icon-chaidan',
            },
            {
              name: '初始库存入库',
              url: '../workInside/lnitialInventory',
              icon: 'icon-rukudan',
            },
            {
              name: '退料确认',
              url: '../workEnter/receiptConfirmation',
              icon: 'icon-cangpeitubiao_querenrukuquerenchukuquerenpandianjieguo',
            },
            {
              name: '上架任务',
              url: '../workEnter/shelfTask',
              icon: 'icon-renwu',
            },
            {
              name: '拣货任务',
              url: '../workOut/pickingTask',
              icon: 'icon-renwu',
            },
            {
              name: '料框拣货',
              url: '../workOut/pickingTaskFrame',
              icon: 'icon-renwu',
            },
            {
              name: '移库调拨',
              url: '../workInside/transferWarehouse',
              icon: 'icon-yiku',
            },
            {
              name: '盘点',
              url: '../workInside/takeStock',
              icon: 'icon-navicon-kcpd',
            },
            {
              name: '复盘',
              url: '../workInside/replay',
              icon: 'icon-navicon-kcpd',
            },
            {
              name: '组托/拆托',
              url: '../workInside/pallet',
              icon: 'icon-fenzu',
            },
            {
              name: '库存查询',
              url: '../query/inventoryInquiry',
              icon: 'icon-chaxun',
            },
          ],
        },
        {
          name: '生产汇报',
          showTitle: false,
          list: [
            {
              name: '装框汇报',
              url: '../yundingOut/black/framingReport',
              icon: 'icon-xinxiguanli',
            },
            {
              name: '检验',
              url: '../yundingOut/black/blackInspection',
              icon: 'icon-navicon-kcpd',
            },
            // {
            // 	name: '汇报确认',
            // 	url: '../yundingOut/black/framingConfirm',
            // 	icon: 'icon-shouhuoqueren',
            // },
          ],
        },
        {
          name: '黑件外发',
          showTitle: false,
          list: [
            {
              name: '黑件扫码装车',
              url: '../yundingOut/black/scanCar',
              icon: 'icon-rukudan',
            },
            {
              name: '黑件发货确认',
              url: '../yundingOut/black/shippingConfirm',
              icon: 'icon-renwu',
            },
          ],
        },
        {
          name: '白件收回',
          showTitle: false,
          list: [
            {
              name: '白件卸车',
              url: '../yundingOut/white/whiteUnloading',
              icon: 'icon-chukudan',
            },
            {
              name: '白件理货',
              url: '../yundingOut/white/whiteTally',
              icon: 'icon-kaoqindaka',
            },
            {
              name: '白件检验',
              url: '../yundingOut/white/whiteInspection',
              icon: 'icon-navicon-kcpd',
            },
          ],
        },
        // {
        // 	name: '内部半成品',
        // 	showTitle: false,
        // 	list: [
        // 		{
        // 			name: '汇报',
        // 			url: '../yundingOut/spraying/sprayingBlackReport',
        // 			icon: 'icon-xinxiguanli',
        // 		},
        // 		{
        // 			name: '检验',
        // 			url: '../yundingOut/spraying/sprayingBlackInspection',
        // 			icon: 'icon-navicon-kcpd',
        // 		},
        // 		{
        // 			name: '接收确认',
        // 			url: '../yundingOut/spraying/sprayingBlackConfirm',
        // 			icon: 'icon-jianyanrenwu',
        // 		},
        // 		{
        // 			name: '白件汇报',
        // 			url: '../yundingOut/spraying/sprayingWhiteReport',
        // 			icon: 'icon-xinxiguanli',
        // 		},
        // 		{
        // 			name: '白件接收确认',
        // 			url: '../yundingOut/spraying/sprayingWhiteConfirm',
        // 			icon: 'icon-jianyanrenwu',
        // 		},
        // 		{
        // 			name: '拆框',
        // 			url: '../yundingOut/spraying/split',
        // 			icon: 'icon-chaidan',
        // 		},
        // 	],
        // },
        {
          name: '其他',
          showTitle: false,
          list: [
            {
              name: '并框',
              url: '../yundingOut/other/merge',
              icon: 'icon-hebing',
            },
            {
              name: '拆框',
              url: '../yundingOut/other/split',
              icon: 'icon-chaidan',
            },
            {
              name: '框查询',
              url: '../yundingOut/other/instantInventory',
              icon: 'icon-navicon-kcpdd',
            },
            {
              name: '新增容器条码',
              url: '../yundingOut/other/newContainers',
              icon: 'icon-fenzu',
            },
          ],
        },
      ],
    };
  },
  onShow() {
    that.bot = 0;
    that.getNotice();
  },
  onLoad() {
    that = this;
    that.userName = uni.getStorageSync('name');
    that.setMenu();
  },
  methods: {
    getNotice() {
      that.$u
        .get('/api/wsSceneMessage', {
          page: 0,
          size: 100,
          userId: uni.getStorageSync('id'),
        })
        .then((res) => {
          if (res.data.content.some((item) => item.state == 0)) {
            that.bot = 10;
          }
        });
    },
    openNotice() {
      uni.navigateTo({
        url: '/pages/index/notice',
      });
    },
    openSet() {
      uni.navigateTo({
        url: '/pages/yundingOut/set/index',
      });
    },
    setMenu() {
      for (const item of that.menuList) {
        for (let i = 0; i < item.list.length; i++) {
          item.list[i].color = that.colorList[i];
        }
      }
      that.farEndList = uni.getStorageSync('farEndList');
      console.log(that.farEndList);
      for (const items of that.menuList) {
        for (const item of items.list) {
          if (that.farEndList.includes(item.url)) {
            items.showTitle = true;
            item.showMenu = true;
          }
        }
      }
    },
    submit() {
      console.log(this.searchText);
    },
    toPage(e) {
      setTimeout(function () {
        uni.navigateTo({
          url: e,
        });
      }, 0);
    },
    // logOut() {
    // 	var token = uni.getStorageSync('token');
    // 	uni.request({
    // 		url: global.reqHeard + '/auth/logout',
    // 		header: {
    // 			Authorization: token,
    // 			LoginEntryType: 'mobile',
    // 		},
    // 		method: 'DELETE',
    // 		success: (res) => {},
    // 		fail: (err) => {},
    // 	});
    // 	uni.clearStorage();
    // 	uni.navigateTo({
    // 		url: '../login/index',
    // 	});
    // }
  },
};
</script>

<style lang="less">
page {
  background-color: #f8f8f8;
}

.header-view {
  top: 0;
  left: 0;
  z-index: 999;
  display: flex;
  position: sticky;
  height: 170rpx;
  padding: 0 35rpx 25rpx 35rpx;

  align-items: flex-end;
  background-color: #fff;
  border-radius: 0 0 25rpx 25rpx;
  box-shadow: 5rpx 8rpx 15rpx #c9c9c9;

  .header-name {
    width: 400rpx;
    font-weight: 700;
    font-size: 45rpx;
  }

  .set-view {
    display: flex;
    margin-left: auto;
  }
}

.title-name {
  margin-top: 10rpx;
  font-size: 32rpx;
}

// 菜单宫容器
.menu-view {
  display: flex;
  flex-direction: column;

  .menu-line-view {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 25rpx 10rpx;
    margin: 0 0 25rpx 0;

    .menu-title {
      color: #a2a2a2;
      padding: 10rpx 0 35rpx 25rpx;
    }

    .menu-block-list {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;

      .menu-children {
        width: 33.33%;
        display: flex;
        flex-direction: column;
        padding: 25rpx 25rpx 25rpx 25rpx;
        align-items: center;
        border-radius: 25rpx;

        .iconfont {
          font-size: 75rpx;
        }
      }
    }
  }
}

.badge {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
}

.click-view:active {
  transform: scale(0.9);
  background-color: #f9f9f9;
}
</style>
